<script setup lang="ts">
import { computed, inject, ref } from 'vue'
import * as injectKeys from "@/services/injectKeys";
import { ForeachContainer } from "@/models/containers";
import Dynamic from "@/components/Dynamic.vue";
import { createSqlQueryMappingRunner } from '@/core/jsCodeRunner';

const utilsServices = inject(injectKeys.utilsKey)!


const props = defineProps<{ model: ForeachContainer }>()
const model = props.model
const sqlInfo = model.sql


const queryResultRows = computed(() => {
    const sqlQuery = utilsServices.createSqlQuery(model.id, sqlInfo.sql)
    const mapRunner = createSqlQueryMappingRunner(sqlInfo.jsMap, sqlInfo.type)

    const data = sqlQuery.query()


    return mapRunner.map(data) as {}[]

})

</script>

<template>
    <template v-for="row in queryResultRows" :key="row">
        <Dynamic :component="cp" v-for="cp in props.model.children" :foreachRow="row"></Dynamic>
    </template>
</template>

<style scoped lang="less">
.pybi-foreach {
    position: relative;

}
</style>